<template>
    <admin-container>
        <el-form label-width="100px" @submit.prevent.native="onSubmit">
            <el-form-item label="充值用户">
                <k-select-user v-model="user_id"/>
            </el-form-item>

            <el-form-item label="类型">
                <el-radio-group v-model="form.type">
                    <el-radio label="money">金额</el-radio>
                    <el-radio label="score">积分</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="充值数额">
                <el-input v-model="form.value" style="width: 200px">
                    <span slot="append">{{ form.type === 'money' ? '元' : '分' }}</span>
                </el-input>
            </el-form-item>

            <el-form-item label="备注信息">
                <el-input v-model="form.remark" type="textarea" rows="6"/>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" native-type="submit">保存</el-button>
            </el-form-item>
        </el-form>
    </admin-container>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import AdminContainer from '@/components/admin-container.vue';
import KSelectUser from '@/components/select-user.vue';
@Component({
    components: { KSelectUser, AdminContainer }
})
export default class UserRecharge extends Vue {
    user_id: number | null = null;
    form: any = {
        type: 'money'
    };

    mounted() {
    }

    // 提交充值
    onSubmit() {
        if (!this.user_id) {
            this.$message.error('清选择用户');
            return;
        }
        const load = this.$keLoading('提交中...');
        this.$http.post(`admin/user/${this.user_id}/recharge`, this.form)
            .finally(() => load.close())
            .then(result => {
                this.user_id = null;
                this.$delete(this.form, 'value');
                this.$delete(this.form, 'remark');
                this.$message.success('充值成功');
            })
            .catch(err => {
                if (err.response?.data?.message) {
                    this.$message.error(err.response?.data?.message);
                }
            })
    }
}
</script>
